<template>
  <div>

  </div>
</template>
<script setup lang="ts">
//接口
// type Props = {
//   a: string;
//   b: number;
//   c: boolean;
//   d: number;
//   e: string;
//   h: number;
// }
// interface InterProps {
//   a: string;
//   b: number;
//   c: boolean;
//   d: number;
//   e?: string;
//   readonly h: number;
//   [f: string]: any //任意属性
// }
//
// let res:InterProps= {
//   a: '小杜杜',
//   b: 7,
//   c: true,
//   d: 1,
//   h: 2,
//   f: '小明'
// }
// res.h = 4
// console.log(res)


//函数类型
// 1.可以像使用其他接口一样使用这个函数类型的接口
// 2.函数中参数的名称可以和接口中定义的名称不一致
// type TAdd = (a: number, b: number) => number;
// interface IAdd {
//   (a: number, b: number): number;
// }
// // let add: IAdd = (a, b) => {
// //   return a + b;
// // };
// // add(1,3)
//
// let add: IAdd = (c, d) => {
//   return c + d;
// };
// add(1,3)

//函数类型接口2

// interface Props {//约束函数
//      (data: number): number
// }
// const Info:Props= (data: number) => {
//   return data + 1
// }
// Info(1)

// interface ClassProps {//约束类
//     new (name: string): A
// }

// class A {
//   name: string
//   constructor(name: string) {
//     this.name = name
//   }
// }

// // var a = new A('小明')
// // console.log(a);
// const Info1 = (Fun:ClassProps,name:string) => {
//   return new Fun(name)
// }
// Info1(A,'小明')










// 可索引的类型（索引签名）重要
// 字符串索引签名
// interface  MyStringIndexedObject{
//   // name: string,
//   // age: number,
//   // city: string
//   [key: string]: string | number
// }
// const obj:MyStringIndexedObject = {
//   name: 'John',
//   age: 30,
//   city: 'New York'
// };
// console.log(obj)
// //数字索引签名
// interface  MyNumberIndexedObject {
//   [index: number]: string;
// }
// const arr:MyNumberIndexedObject=[
//   'apple',
//   'banana',
//   'cherry'
// ];
// console.log(arr)


// interface InterProps2{
//   [key: string]:string|number|boolean
// }
//
// let res:InterProps2= {
//   a: '小杜杜',
//   b: 7,
//   c: true,
//   d: 1,
//   h: 2,
//   f: '小明'
// }
// console.log(res)


//接口继承
// interface InterProps {
//   a: string;
//   b: number;
//   c: boolean;
//   d: number;
//   e?: string;
//   readonly h: number;
// }
// interface InterProps2 extends InterProps {
//   g: string;
// }
// let res:InterProps2= {
//   a: '小杜杜',
//   b: 7,
//   c: true,
//   d: 1,
//   h: 2,
//   g: '小明'
// }


// 反例

// interface A {
//   [index: string]: number; // 索引签名，表示所有字符串键对应的值都必须是 number 类型
//   length: number;          // 合法，因为 length 的类型是 number，与索引签名一致
//   name: string;            // 错误，因为 name 的类型是 string，不是索引签名返回类型 number 的子类型
// }



//使用类型断言来调用我们的接口    断言
// interface Goddass {
//   firstName: string;
//   lastName: string;
//   age: number;
//   singName: string;
//   dance: string;
// }
// let goddass4: Goddass= {
//   firstName: "邱",
//   lastName: "淑贞",
//   age: 18,
//   singName: "赌王",
//   dance: "芭蕾"
// }

// let goddass4= ({
//   firstName: "邱",
//   lastName: "淑贞",
//   age: 18,
//   singName: "赌王",
//   dance: "芭蕾"
// }) as Goddass


// let a:string = "lee"
//对a使用断言
// let a = 'lee' as string
// console.log(goddass4)



// 断言的另一种写法  不推荐
// let str:any = '小杜杜'
// // let res1= (str.length) as number;
// let res1:number = (<string>str).length;
// console.log(res1)




</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
